<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../JS/jquery.js" type="text/javascript" charset="utf-8"></script>

    <style type="text/css">
        table{
            border-top: 1px solid #000000;
            border-right: 1px solid #000;
            width: 400px;
            text-align: center;
        }
        th{
            border-left: 1px solid #000;
            border-bottom: 1px solid #000;
        }
        td{
            border-left: 1px solid #000;
            border-bottom: 1px solid #000;
        }
    </style>
    
</head>
<body>
    <table cellspacing="0" cellpadding="0" id="table">
        <tr>
            <th>书名</th> <th>价格</th>
        </tr>
        <tr>
            <td>看得见风景的房间</td><td>￥30.00</td>
        </tr>
        <tr>
            <td>60个瞬间</td><td>￥32.00</td>
        </tr>
    </table>
    <button type="button" class="add">增加一行</button>
    <button type="button" class="remove">删除第2行</button>
    <button type="button" class="change">修改标题样式</button>
    <button type="button" class="cc">复制最后一行</button>
    
</body>
<script>
    $(function(){
	// 添加新的一行
	$(".add").click(function(e){
		// console.info(e);
		var tr = $("<tr class='a'></tr>");
		var book = "<td><input type='text' class='text' id='title'/></td>";
		var num = "<td><input type='text' class='text' id='num'/></td>";
		tr.html(book+num);
		// $("#table").append("<tr>"+book+num+"</tr>");
		$("#table").append(tr);
		tr.slideDown();
		
		// 回车 键盘事件 保存输入在 input 框中的内容
		$(document).keydown(function(e){
			// console.info(e);
			if(e.key=="Enter"){
				// console.info($("#title").val()+$("#num").val());
				// 运用替换节点 将之前的input框 替换掉
				$(".a").replaceWith("<tr>"+"<td>"+$("#title").val()+"</td>"+"<td>"+"￥"+$("#num").val()+"</td>"+"</tr>");
			};
		});
	});
	
	// 删除第二行
	$(".remove").on("click",function(){
		// 索引号 2 remove 删除
		$("tr").eq(2).remove();
	});
	
	// 修改标题样式
	$(".change").click(function(e){
		var book = "<th><input type='text' class='text' id='title1'/></th>";
		var num = "<th><input type='text' class='text' id='num1'/></th>";
		var tr = $("th").parent();
		tr.replaceWith("<tr class='update'>"+book+num+"</tr>");
		$(document).keydown(function(e){
			// console.info(e);
			if(e.key=="Enter"){
				// console.info($("#title").val()+$("#num").val());
				// 运用替换节点 将之前的input框 替换掉
				$(".update").replaceWith("<tr>"+"<th>"+$("#title1").val()+"</th>"+"<th>"+$("#num1").val()+"</th>"+"</tr>");
			};
		});
	})
	
	// 复制最后一行 添加在最后一行
	$(".cc").click(function(){
		$("#table tr:last").clone(true).appendTo($("table tr:eq(0)").parent());
	});
})

</script>
</html>